import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_about_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_block_list_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_coin_shop_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_edit_profile_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_follow_list_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_my_activities_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_my_articles_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_setting_view.dart';
import 'package:jet_rails/jr_app/jr_views/jr_user/jr_user_controller.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_avatar.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_badge.dart';
import 'package:jet_rails/jr_app/jr_widgets/jr_blur_container.dart';
import 'package:jet_rails/jr_services/jr_services.dart';
import 'package:jet_rails/jr_utils/jr_toast.dart';

class JrUserView extends StatefulWidget {
  const JrUserView({super.key});

  @override
  State<JrUserView> createState() => _JrUserViewState();
}

class _JrUserViewState extends State<JrUserView> {
  late JrUserController controller;

  @override
  void initState() {
    controller = Get.put(JrUserController());

    super.initState();
  }

  @override
  void dispose() {
    Get.delete<JrUserController>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(top: 0, left: 0, right: 0, height: 320.h, child: buildPoster()),
        Positioned(bottom: 0, left: 0, right: 0, height: 525.h, child: buildContentPanel()),
        Positioned(bottom: 470.h, left: 0, right: 0, child: buildMyCoins()),
        Positioned(top: 100, left: 0, right: 0, child: buildUserInfo()),
      ],
    );
  }

  Widget buildPoster() {
    return Stack(
      children: [
        Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: 320.h,
            child: SizedBox(
              height: 280.h,
              child: Image.asset(
                'assets/images/user_view_bg_poster.png',
                fit: BoxFit.fill,
              ),
            )),
        JrBlurContainer()
      ],
    );
  }

  buildContentPanel() {
    return Stack(
      clipBehavior: Clip.none,
      children: [
    JrBlurContainer(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(topLeft: const Radius.circular(24), topRight: Radius.circular(24.r)),
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Color.fromRGBO(164, 110, 255, 0.6), Color.fromRGBO(164, 110, 255, 0.2)],
        ),
      ),
    ),
    Positioned(bottom: 0, left: 0, right: 0, height: 540.h, child: buildItemList()),
      ],
    );
  }

  Widget buildUserInfo() {
    return Obx(() {
      final userId = JrServices.instance.loginUser.value.userId ?? '';
      return Column(children: [
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            children: [
              Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        JrServices.instance.loginUser.value.nickname ?? '',
                        style: TextStyle(color: Colors.white, fontSize: 18.sp, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(width: 8.w),
                      GestureDetector(
                        onTap: () {
                          Get.to(() => const JrEditProfileView());
                        },
                        child: SvgPicture.asset('assets/svg/icon_edit.svg', height: 14.h, color: Colors.pink),
                      )
                    ],
                  ),
                  SizedBox(height: 18.h),
                  Row(
                    children: [
                      Text('ID: $userId', style: TextStyle(color: Colors.white60, fontSize: 12.sp)),
                      SizedBox(width: 8.w),
                      GestureDetector(
                        onTap: () {
                          Clipboard.setData(ClipboardData(text: userId));
                          JrToast.show('Copy successfully');
                        },
                        child: JrBadge(content: Text('copy', style: TextStyle(color: Colors.white, fontSize: 10.sp))),
                      )
                    ],
                  )
                ],
              )),
              JrAvatar(
                  size: 88,
                  borderWidth: 1,
                  url: JrServices.instance.loginUser.value.getAvatarUrl,
                  attachment: GestureDetector(
                    onTap: () {
                      Get.to(() => const JrEditProfileView());
                    },
                    child: Image.asset('assets/webp/icon_edit_avatar.webp', height: 26),
                  ))
            ],
          ),
        ),
      ]);
    });
  }

  Widget buildMyCoins() {
    final child = GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => Get.to(() => const JrCoinShopView()),
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          child: Stack(
            children: [
              Container(
                  height: 106.h,
                  padding: EdgeInsets.symmetric(horizontal: 32.w, vertical: 22.h),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12.r),
                    color: const Color(0xFF9A68C7),
                  ),
                  child: Row(
                    children: [
                      Image.asset('assets/webp/icon_coin.webp', height: 60.r),
                      SizedBox(width: 16.w),
                      Expanded(
                          child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('Coins', style: TextStyle(color: Colors.white, fontSize: 16.sp)),
                          SizedBox(height: 8.h),
                          Obx(() => Text('${JrServices.instance.loginUser.value.availableCoins}',
                              style: TextStyle(color: Colors.white, fontSize: 26.sp, fontWeight: FontWeight.bold))),
                        ],
                      )),
                    ],
                  )),
              Positioned(
                right: 0,
                bottom: 0,
                child: Transform(
                  alignment: Alignment.center,
                  transform: Matrix4.rotationY(pi),
                  child: Image.asset('assets/images/icon_rails.png', height: 80.h),
                ),
              )
            ],
          ),
        ));
    return child;
  }

  Widget buildItemList() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 100.h),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          buildItem('My Activities', 'assets/webp/icon_user_my_article.webp', () {
            Get.to(() => const JrMyActivitiesView());
          }),
          buildItem('My Articles', 'assets/webp/icon_user_my_ticket.webp', () {
            Get.to(() => const JrMyArticlesView());
          }),
          buildItem('Block List', 'assets/webp/icon_user_block_list.webp', () {
            Get.to(() => const JrBlockListView());
          }),
          buildItem('Follow List', 'assets/webp/icon_user_follow_list.webp', () {
            Get.to(() => const JrFollowListView());
          }),
          buildItem('About', 'assets/webp/icon_user_about.webp', () {
            Get.to(() => const JrAboutView());
          }),
          buildItem('Setting', 'assets/webp/icon_user_setting.webp', () {
            Get.to(() => const JrSettingView());
          }, true),
        ],
      ),
    );
  }

  Widget buildItem(String title, String iconPath, Function() callback, [bool hideBorder = false]) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: callback,
      child: Container(
        height: 56.h,
        margin: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          children: [
            Row(
              children: [
                Image.asset(iconPath, width: 16.r),
                SizedBox(width: 16.w),
                Container(
                  height: 55.h,
                  alignment: Alignment.centerLeft,
                  child: Text(
                    title,
                    style: TextStyle(color: Colors.white, fontSize: 16.sp),
                  ),
                ),
                const Spacer(),
                Icon(Icons.arrow_forward_ios, size: 16.w, color: const Color(0xFFCCCCCC)),
              ],
            ),
            if (!hideBorder)
              Container(
                height: 1.h,
                color: const Color(0xFFCCCCCC),
              ),
          ],
        ),
      ),
    );
  }
}
